<template>
  <div class="container_box">
    <el-descriptions title="自定义图表数据视图">
      <el-descriptions-item label="描述">
        自定义图表数据视图，该组件使用了xlsx依赖包，解决了echarts数据视图多Y轴的单位问题，可将数据视图导出为excel文件。
      </el-descriptions-item>
    </el-descriptions>
    <ChartDataView
      ref="chartDataViewRef"
      v-loading="loading"
      element-loading-text="Loading..."
      element-loading-background="rgba(122, 122, 122, 0.8)"
    >
      <div class="chart_box" ref="chartRef"></div>
    </ChartDataView>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, shallowRef, nextTick } from "vue";
import { useEcharts } from "@/hook";

const colors = ["#5470C6", "#91CC75", "#EE6666"];
const option = {
  color: colors,
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
    },
  },
  grid: {
    right: "20%",
  },
  legend: {},
  xAxis: {
    type: "category",
    data: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ],
    axisTick: {
      alignWithLabel: true,
    },
    axisLabel: {
      color: localStorage.getItem("themeColor"),
    },
  },
  yAxis: [
    {
      type: "value",
      position: "right",
      name: "ml",
      nameGap: 20,
      z: 3,
      nameTextStyle: {
        color: localStorage.getItem("themeColor"),
      },
      alignTicks: true,
      axisLabel: {
        color: localStorage.getItem("themeColor"),
      },
      splitLine: {
        lineStyle: {
          color: "#3BEFFF3A",
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[0],
        },
      },
    },
    {
      type: "value",
      position: "right",
      name: "ml",
      nameGap: 20,
      z: 3,
      nameTextStyle: {
        color: localStorage.getItem("themeColor"),
      },
      offset: 80,
      alignTicks: true,
      axisLabel: {
        color: localStorage.getItem("themeColor"),
      },
      splitLine: {
        lineStyle: {
          color: "#3BEFFF3A",
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[1],
        },
      },
    },
    {
      type: "value",
      position: "left",
      name: "°C",
      nameGap: 20,
      z: 3,
      nameTextStyle: {
        color: localStorage.getItem("themeColor"),
        padding: [0, 28, 0, 0],
      },
      alignTicks: true,
      axisLabel: {
        color: localStorage.getItem("themeColor"),
      },
      splitLine: {
        lineStyle: {
          color: "#3BEFFF3A",
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[2],
        },
      },
    },
  ],
  series: [
    {
      name: "Evaporation",
      type: "bar",
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
      ],
    },
    {
      name: "Precipitation",
      type: "bar",
      yAxisIndex: 1,
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
      ],
    },
    {
      name: "温度",
      type: "line",
      yAxisIndex: 2,
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
    },
  ],
};

const chartRef = shallowRef(null);
const { myChart, setOption, initEcharts, disposeEcharts } =
  useEcharts(chartRef);

const chartDataViewRef = ref(null);
const loading = ref(false);

const init = async () => {
  loading.value = true;
  if (myChart.value) {
    await disposeEcharts();
  }
  await initEcharts();
  await setOption(option);
  nextTick(() => {
    chartDataViewRef.value.getChartOption(option);
    loading.value = false;
  });
};

onMounted(() => {
  init();
});

onBeforeUnmount(() => {
  disposeEcharts();
});
</script>

<style lang="less" scoped>
.chart_box {
  width: 100%;
  height: 600px;
}
</style>
